<template>
  <Layout>
<!--    头部-->
    <Header>
      <div class="demo-avatar">
        <Avatar shape="square" :src=imgs size="50" />
        <h3 style="color: white;display: inline-block">{{name}}</h3>
      </div>
    </Header>
<!--    内容-->
    <Content>
      <Divider/>
      <Row style="padding: 10px">
        <Input v-model="vlues" type="textarea" :rows="4" placeholder="请留言..." />
        <div style="margin-top: 5px">
          <Button type="default">留言</Button>
          <Button type="default" @click="closes">取消</Button>
        </div>
      </Row>
      <Divider/>
      <List item-layout="vertical" style="padding: 30px">
        <ListItem v-for="item in data" :key="item.title">
          <ListItemMeta :avatar="item.avatar" :title="item.title" :description="item.description" />
          {{ item.content }}
          <template slot="action">
            <li>
              <Icon type="ios-star-outline" /> 123
            </li>
            <li>
              <Icon type="ios-thumbs-up-outline" /> 234
            </li>
            <li>
              <Icon type="ios-chatbubbles-outline" /> 345
            </li>
          </template>
          <template slot="extra">
            <img src="https://dev-file.iviewui.com/5wxHCQMUyrauMCGSVEYVxHR5JmvS7DpH/large" style="width: 250px">
          </template>
        </ListItem>
      </List>
    </Content>
  </Layout>
</template>
<script>
export default {
  data() {
    return {
      vlues:'',
      imgs:require('../../assets/logo.png'),
      name:sessionStorage.getItem('name'),
      data: [
        {
          title: 'This is title 1',
          description: 'This is description, this is description, this is description.',
          avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar',
          content: 'This is the content, this is the content, this is the content, this is the content.'
        },
        {
          title: 'This is title 2',
          description: 'This is description, this is description, this is description.',
          avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar',
          content: 'This is the content, this is the content, this is the content, this is the content.'
        },
        {
          title: 'This is title 3',
          description: 'This is description, this is description, this is description.',
          avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar',
          content: 'This is the content, this is the content, this is the content, this is the content.'
        },
        {
          title: 'This is title 4',
          description: 'This is description, this is description, this is description.',
          avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar',
          content: 'This is the content, this is the content, this is the content, this is the content.'
        },
      ]
    }
  },
  methods: {
    //清空留言板
    closes(){
      this.vlues='';
    }
  },
  components: {}
}
</script>
<style>
  .flexs {
    display: flex;
    align-items: center;
  }
</style>
